<template>
  <div>
    <el-container style="height: 100vh;">
      <!-- 固定侧边栏 -->
      <el-aside :style="{ width: asideWidth, position: 'fixed', top: 0, bottom: 0, backgroundColor: '#fafafa' }">
        <el-header style="color: black; background-color: #fafafa; padding: 0 15px;">
          <div style="display: flex ;margin-top: 15px ">
            <div style="flex:50%;display: flex;width: 130px;">
              <div style="flex:1;font-weight: bold">
                <img alt="lala" src="@/assets/boyun.png" style="width:45px;height: 45px;" @click="$router.push('/')">
              </div>
              <div style="flex:1; font-size: 20px;padding-right: 25px;padding-top: 6px;font-weight: bold">博云</div>
            </div>
            <div style="flex:50%;display: flex ;width: 130px; ">
              <div style="flex:1;padding-left: 70px;font-size: 20px;font-weight: bold;padding-top: 10px;spadding-left: 25px">
                <i class=" el-icon-bell"></i>
              </div>
              <div style="flex:1;font-weight: bold;padding-left: 0px;padding-top: 2px;">
<!--                <img alt="lala" src="@/assets/login.jpg" style="border-radius:50%;width:35px;height: 35px;" @click="$router.push('/user')">-->
                <!--下拉栏-->
                <el-dropdown placement="bottom" style="border-radius:50%;width:35px;height: 35px;">
                  <div style="display: flex;align-items: center ;cursor:default;margin-top: 10px">
                    <img :src="user.avatar ||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                         alt=""
                         style="cursor:pointer; width: 45px;height:45px;margin-top: -10px;border-radius: 50%;">
                  </div>
                  <!-- 下拉栏内容 @click.native  item没有click事件-->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </el-header>
        <div style="padding: 15px;align-content: center;justify-content: center">
          <el-button type="info" plain  style="width: 235px;border-radius: 3%; border: none" @click="dialogVisible = true">
            <i class="el-icon-search" style="font-size: medium">搜索</i>
          </el-button>
          <el-button  plain  style="width: 43px;border-radius: 20%;justify-content: center;align-content: center" @click="dialogVisible2 = true">
            <i class="el-icon-plus"></i>
          </el-button>
        </div>
        <el-menu :default-openeds="['/knowledge-base']"  class="custom-menu" :collapse="isCollapse" :collapse-transition="false" :default-active="$route.path" active-text-color="black" router style="border: none; background-color: #fafafa;">
          <el-menu-item index="/home">
            <i class="el-icon-sunny"></i>
            <span slot="title">开始</span>
          </el-menu-item>
          <el-menu-item index="/password">
            <i class="el-icon-edit"></i>
            <span slot="title">小记</span>
          </el-menu-item>
          <el-menu-item index="/favorite">
            <i class="el-icon-star-off"></i>
            <span slot="title">收藏</span>
          </el-menu-item>
          <el-menu-item index="/explore">
            <i class="el-icon-orange"></i>
            <span slot="title">逛逛</span>
          </el-menu-item>
          <el-menu-item index="/album">
            <i class="el-icon-picture-outline"></i>
            <span slot="title">相册</span>
          </el-menu-item>
          <el-menu-item index="/xx">
            <i class="el-icon-video-camera"></i>
            <span slot="title">视频</span>
          </el-menu-item>
          <el-submenu class="custom-submenu" index="/knowledge-base" >
            <template slot="title">
              <i class="el-icon-notebook-2"></i>
              <span>知识库</span>
            </template>
            <el-menu-item class="xxx" v-for="item in menuItems"
                          :key="item.index"
                          :index="item.index"
                          @click="handleMenuItemClick(item)"
                          style="height: 36px; display: flex; align-items: center;">
              <i class="el-icon-s-management" style="color: #409EFF; font-size: 20px; margin-right: 10px;"></i>
              <span class="menu-item-text">{{ item.name }}</span>
           <div class="xxxs"  @click.stop="handleMoreClick(item)">
              <el-dropdown placement="bottom" style="border-radius:50%;width:35px;height: 35px;">
                <div style="display: flex;align-items: center ;cursor:default;margin-top: 10px">
                  <i class="el-icon-more xxxs" style="cursor:pointer;color: #cccccc; font-size: 15px; margin-right: 10px;"></i>
                </div>
                <!-- 下拉栏内容 @click.native  item没有click事件-->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="$router.push('/password')">权限</el-dropdown-item>
                  <el-dropdown-item @click.native="$router.push('/password')">更多设置</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteCategory(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
           </div>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主内容区 -->
      <el-main :style="{ marginLeft: asideWidth, flex: '83%' }">
        <router-view @update:user="updateUser"/>
      </el-main>
    </el-container>

    <!-- 弹窗组件 -->
    <el-dialog  class="rounded-dialog" title="搜索" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-input placeholder="搜索内容，或输入 > 唤醒更多" prefix-icon="el-icon-search" v-model="searchQuery" style="width: 100%; margin-bottom: 20px;"></el-input>
      <div>
        <ul>
          <li v-for="item in menuItems" :key="item.index" class="menu-item">
            <a :href="item.index" class="menu-link">
              <i class="el-icon-notebook-2 back-icon" style="color: #409EFF;"></i>
              <span class="menu-text">{{ item.name }}</span>
            </a>
            <i class="el-icon-right jump-icon" style="color: #409EFF;">跳转</i>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSearch">搜 索</el-button>
      </span>
    </el-dialog>

    <!-- 弹窗组件 -->
    <el-dialog  class="rounded-dialog" title="新建知识库" :visible.sync="dialogVisible2" width="40%" :before-close="handleClose">
      <el-form :model="directoryForm" :rules="rules" ref="directoryForm" label-width="100px">
        <el-form-item label="目录名称" prop="name">
          <el-input v-model="directoryForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleSearch2">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>

export default {
  name: "HomeView",
  data() {
    return {
      user: '',
      dialogVisible: false,
      dialogVisible2:false,
      directoryForm: {
        name: '',
        parentId: '',
        level: '',
        userId: ''
      },
      searchQuery: '',
      isCollapse: false,
      asideWidth: '17%',
      menuItems: [],
      deleteInfo:{
        id:'',
        userId:''
      },
      rules: {
        name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem('honey-user') || '{}'),
        this.sendPostRequest();
  },
  methods: {
    deleteCategory(item) {
          this.deleteInfo.id=item.id
          this.deleteInfo.userId=this.user.userId
       this.$request.post('/category/delete',this.deleteInfo).then(res=>{
        if (res.code==="200"){
          this.$message.success("删除成功")
          this.sendPostRequest()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleMoreClick(item) {
      // 处理图标的点击事件的逻辑
      console.log('更多图标被点击了:', item);
      // 你可以在这里添加更多的逻辑，比如显示一个弹窗、发送请求等
    },
    handleMenuItemClick(item) {
      console.log('Menu item clicked:', item);
      // 如果需要传递参数，可以这样做
      localStorage.setItem('noteListId', item.id);
      this.$router.push({ path: '/manager3', query: { id: item.id,name:item.name} });
    },
    logout() {
      localStorage.removeItem('honey-user')  //清除当前token和用户数据
      this.$router.push('/login')
    },
    sendPostRequest(){
      this.$request.get('/category/getTopCategory',{
        params:{
          userId:this.user.userId
        }
      }).then(res=>{
        if (res.code==="200"){
          this.menuItems=res.data
        }else {
          this.$message.error("菜单加载失败")
        }
      });
    },
    updateUser(user) {
      this.user = JSON.parse(JSON.stringify(user))//json的深拷贝，变成一个新对象 ，让父级对象和自己无关
    },
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    // },
    handleSearch() {
      // 处理搜索逻辑
      console.log('搜索关键词:', this.searchQuery);
      this.dialogVisible = false;
    },
    handleSearch2() {
      // 处理搜索逻辑
      console.log('添加目录:', this.searchQuery);
      this.directoryForm.userId=this.user.userId
      this.directoryForm.level=1
      this.directoryForm.parentId=0
      this.$request.post('/category/add',this.directoryForm).then(res=>{
        if (res.code==="200"){
          this.$message.success('添加成功')
        }else {
          this.$message.error("添加失败")
        }
      });
      this.dialogVisible2 = false;
    }
  }
}

</script>
<style>
.xxxs {
  position: absolute; /* 设置绝对定位 */
  right: 10px; /* 距离容器右侧10px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
}



/* 确保 menu-item 的高度和对齐 */
.custom-menu .el-menu-item, .custom-menu .el-submenu__title {
  height: 36px; /* 固定菜单项高度 */
  line-height: 36px; /* 垂直居中 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 20px; /* 内边距 */
  font-size: 14px; /* 字体大小统一 */
}

.menu-item .el-icon-s-management {
  font-size: 20px; /* 图标大小 */
  margin-right: 10px; /* 图标和文本之间的间距 */
}

.menu-item-text {
  font-size: 14px; /* 确保文本大小和菜单项统一 */
}

.menu-item  {
  margin:15px 0; /* 上下间距 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px; /* 内边距使内容与边框有空间 */
  border-radius: 4px; /* 圆角效果 */
  transition: background-color 0.3s ease; /* 平滑过渡 */
  position: relative; /* 确保相对定位 */
}

.menu-link  {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  font-size: 15px; /* 调整字体大小 */
}

.menu-link .el-icon-notebook-2 {
  font-size: 18px; /* 调整图标大小 */
  margin-right: 8px; /* 图标与文本之间的间距 */
}

.menu-text  {
  font-size: 15px; /* 确保文本和链接的字体大小一致 */
}

.jump-icon {
  font-size: 15px; /* 跳转图标的大小 */
  margin-left: auto; /* 将图标推到最右边 */
  padding-right: 10px; /* 右侧内边距 */
  visibility: hidden; /* 默认隐藏 */
  transition: visibility 0.3s, opacity 0.3s; /* 平滑过渡 */
}


.menu-item:hover .jump-icon {
  visibility: visible; /* 显示跳转图标 */
  opacity: 1; /* 确保完全可见 */
}

.rounded-dialog {
  border-radius: 12px; /* 设置圆角大小 */
}

.rounded-dialog .el-dialog__header,
.rounded-dialog .el-dialog__body,
.rounded-dialog .el-dialog__footer {
  border-radius: 12px; /* 确保对话框的所有部分都有圆角 */
}

.custom-menu .el-menu-item, .custom-menu .el-submenu__title  {
  margin: 1px 0; /* 减小上下间距 */
  padding: 0px 0px; /* 调整内边距 */
  border-radius: 6px; /* 设置初始圆角 */
}

.custom-menu .el-menu-item:hover, .custom-menu .el-submenu__title:hover {
  background-color: #eff0f0; /* 悬停时的背景颜色 */
  border-radius: 12px; /* 悬停时更大的圆角 */
}

.custom-menu .el-menu-item.is-active {
  background-color: #eff0f0; /* 激活状态的背景颜色 */
  border-radius: 15px; /* 激活状态更大的圆角 */
}

.custom-menu .el-menu-item i, .custom-menu .el-submenu__title i {
  font-size: 18px; /* 调整图标大小 */
  margin-right: 8px; /* 图标与文本之间的间距 */
}

.custom-menu .el-menu-item span, .custom-menu .el-submenu__title span {
  font-size: 13px; /* 调整文本大小 */
}
</style>
